

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon.png">
  <link rel="icon" type="image/png" href="/img/favicon.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="Lin">
  <meta name="keywords" content="">
  <title>选用 OPPO Sans 字体为主题字体 - Vin</title>

  <link  rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.3/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.staticfile.org/github-markdown-css/4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/10.1.2/styles/androidstudio.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->

  
<link rel="stylesheet" href="/css/custom.css">



  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"example.com","root":"/","version":"1.8.5","typing":{"enable":true,"typeSpeed":50,"cursorChar":"_","loop":false},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"anchorjs":{"enable":false,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"copy_btn":true,"image_zoom":{"enable":true},"lazyload":{"enable":true,"onlypost":false},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}}};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.2.0"></head>


<body>
  <header style="height: 60vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>Vin's Blog</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" href="javascript:">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner intro-2" id="background" parallax=true
         style="background: url('https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/img/2020/20201001115214.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="选用 OPPO Sans 字体为主题字体">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2020-10-16 20:56" pubdate>
        2020年10月16日 晚上
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      1.5k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      17
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid">
  <div class="row">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-md">
      <div class="container nopadding-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">选用 OPPO Sans 字体为主题字体</h1>
            
            <div class="markdown-body">
              <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>先前使用过思源宋体，相较默认的微软雅黑还是挺不错的，但作为全局文字感觉差点意思，字体脚部区域显得发虚，即使是字体放大了后仍是如此，故探寻了许多字体后选择了现在使用的 OPPO Sans 字体。</p>
<p>众所周知，中文字体文件整体较大，导致字体加载缓慢，故采用 fonttools 精简掉不常用字体和多个 css 文件子集化字体，来优化网页加载速度，接下来进行逐一介绍。</p>
<h2 id="字体选择"><a href="#字体选择" class="headerlink" title="字体选择"></a>字体选择</h2><p>默认的显示效果为微软雅黑，效果在 Windows 上就中规中矩吧，显示效果一般般，如下图</p>
<p><img src="https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/img/2020/20201020170023.png" srcset="/img/loading.gif" alt="微软雅黑-演示"></p>
<p>之前用的是思源宋体，初用时看中的是它有手写字的味道，确实单个字体挺有感觉的，但整体的文字堆起来效果就一般了，而且其加粗的效果也不明显(<del>有些字体又太过明显，刺眼睛</del>)，使用效果如下</p>
<p><img src="https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/img/2020/20201020165612.png" srcset="/img/loading.gif" alt="思源宋体-演示"></p>
<p>当然，我也看过思源黑体，粗体文本还好，常规的正文总体感觉有点别扭，就弃用了。</p>
<p><img src="https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/img/2020/20201020170113.png" srcset="/img/loading.gif" alt="思源黑体-演示"></p>
<p>一次偶然，在B站上看见了一款OPPO Sans的字体，单字的显示圆润，作为正文字体显示效果不错，同时整体文字堆起来也不会看得难受，尤其是粗体的情况，饱满清晰不突兀，十分适合。使用效果如下</p>
<p><img src="https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/img/2020/20201020170201.png" srcset="/img/loading.gif" alt="OPPO Sans-演示"></p>
<p>故选择了 OPPO Sans 作为主要字体，字体源压缩包<a target="_blank" rel="noopener" href="https://vinoneindex.herokuapp.com/%E5%8D%9A%E5%AE%A2%E8%B5%84%E6%BA%90/%E5%AD%97%E4%BD%93/OPPO-Sans.zip">点此下载</a>。</p>
<h2 id="字体精简"><a href="#字体精简" class="headerlink" title="字体精简"></a>字体精简</h2><p>选择字体 <code>OPPOSans-M.ttf</code> 作为待用字体，文件大小为 <code>9.61 M</code>，对于页面资源来说算是很大的了，故萌生精简字体的想法。</p>
<p>精简字体共需两个步骤：<strong>去繁体和格式转换</strong>。</p>
<h3 id="字体去繁体"><a href="#字体去繁体" class="headerlink" title="字体去繁体"></a>字体去繁体</h3><p>中文字体文占用大是因为简体和繁体的中文的编码范围大，Unicode编码范围为 <code>U+4E00–9FD5</code>，故需要使用 Python 的 <code>fontTools</code> 工具对字体文件去繁。</p>
<p>先提前准备<strong>简体中文的 Unicode 编码集</strong>(<a target="_blank" rel="noopener" href="https://vinoneindex.herokuapp.com/%E5%8D%9A%E5%AE%A2%E8%B5%84%E6%BA%90/%E5%AD%97%E4%BD%93/sc_unicode.txt">sc_unicode.txt</a>)，用于生成字体的子集，包括字母，拉丁字母，中文符号，简体中文。</p>
<p>执行命令如下</p>
<div class="hljs"><pre class="hljs-wrap"><code data-rel="Code" class="hljs bash"><span class="hljs-comment"># 安装 fontTools</span>
pip install fonttools

<span class="hljs-comment"># 编码集和字体放在一起，生成简体中文的字体子集</span>
pyftsubset OPPOSans-M.ttf --unicodes-file=sc_unicode.txt</code></pre></div>

<p>去繁体之后，生成 <code>OPPOSans-M.subset.ttf</code> 文件，文件大小为 <code>1.99 M</code>。</p>
<h3 id="字体格式转换-ttf-gt-woff2"><a href="#字体格式转换-ttf-gt-woff2" class="headerlink" title="字体格式转换 (ttf -&gt; woff2)"></a>字体格式转换 (ttf -&gt; woff2)</h3><p><img src="https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/img/2020/20201020181151.png" srcset="/img/loading.gif" alt="image-20201020181148026"></p>
<p>打开<a target="_blank" rel="noopener" href="http://fontstore.baidu.com/static/editor">在线字体编辑器</a>，把字体文件拖入，选择 <code>woff2</code> 导出，字体大小缩小到 <code>1.04 M</code>。</p>
<h2 id="字体子集化"><a href="#字体子集化" class="headerlink" title="字体子集化"></a>字体子集化</h2><p>虽说精简了字体，但一次性加载 1MB 的资源文件还是很慢的，因此需要对 woff2 字体按照编码范围来切分成多个文件，实现的效果是按网页文字的情况加载字体，但找不到合适的工具，就只能用一个比较笨的方法来导出。</p>
<ol>
<li>设置在线字体编辑器的分页个数，以确定 woff2 的子集个数</li>
</ol>
<p><img src="https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/img/2020/20201020193117.png" srcset="/img/loading.gif" alt="image-20201020193114137"></p>
<ol start="2">
<li>新建一个空白的字体项目，默认带上一个<strong>空白的字形</strong></li>
</ol>
<p><img src="https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/img/2020/20201020193317.png" srcset="/img/loading.gif" alt="image-20201020193310895"></p>
<blockquote>
<p>注意：必须保留一个空白的字符，保证原字形不被覆盖。</p>
</blockquote>
<ol start="3">
<li>把原字体的字符一页一页地剪切，再一个一个地导出子集，就形成了分页字体子集的效果。</li>
</ol>
<p><img src="https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/img/2020/20201020193555.png" srcset="/img/loading.gif" alt="image-20201020193553392"></p>
<ol start="4">
<li><p>接着在子集目录下创建 <code>OPPOSansSC.py</code>，逐个文件地生成对应的 Unicode 编码，用于填充到 <code>font.css</code> 文件中。</p>
<div class="hljs"><pre class="hljs-wrap"><code data-rel="Code" class="hljs python"><span class="hljs-keyword">from</span> fontTools.ttLib <span class="hljs-keyword">import</span> TTFont

font = TTFont(<span class="hljs-string">&#x27;first_font_file.woff2&#x27;</span>)
<span class="hljs-keyword">while</span> <span class="hljs-literal">True</span>:
	font = TTFont(input(<span class="hljs-string">&quot;输入字体文件: &quot;</span>)+<span class="hljs-string">&#x27;.woff2&#x27;</span>)

	unicode_map = font[<span class="hljs-string">&#x27;cmap&#x27;</span>].tables[<span class="hljs-number">0</span>].ttFont.getBestCmap()

	fp = open(<span class="hljs-string">&quot;./test.txt&quot;</span>, <span class="hljs-string">&quot;w+&quot;</span>)

	<span class="hljs-keyword">for</span> key <span class="hljs-keyword">in</span> unicode_map: 
		str1 = <span class="hljs-string">&#x27;U+&#123;:02X&#125;, &#x27;</span>.format(key)
		fp.write(str1)

	fp.close()</code></pre></div>



</li>
</ol>
<ol start="5">
<li><p>若需要批量更新 Jsdelivr 缓存，则使用<a target="_blank" rel="noopener" href="http://www.openurls.com.cn/">网址批量打开工具</a>来清除缓存，完成后刷新页面即刻生效。</p>
<p>生成批量更新网址的 python 代码如下</p>
<div class="hljs"><pre class="hljs-wrap"><code data-rel="Code" class="hljs python"><span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> range(<span class="hljs-number">1</span>,&lt;子集数&gt;):
	strs = <span class="hljs-string">&#x27;https://purge.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/fonts/&lt;字体名&gt;/&lt;字体名&gt;_&#x27;</span>

	<span class="hljs-keyword">if</span>(i&lt;<span class="hljs-number">10</span>):
		strs += <span class="hljs-string">&#x27;0&#x27;</span>

	strs += str(i) + <span class="hljs-string">&#x27;.woff2&#x27;</span>

	print(strs)

print(<span class="hljs-string">&#x27;https://purge.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/css/font.css&#x27;</span>)</code></pre></div>





</li>
</ol>
<p>至此，字体子集化就完成了，暂时能想到这个方法，看看后续有没有更好地工具来实现。</p>
<h2 id="字体修复-粗体-bug"><a href="#字体修复-粗体-bug" class="headerlink" title="字体修复(粗体 bug)"></a>字体修复(粗体 bug)</h2><p>按道理来说，在完成了上述的步骤后，字体的替换工作本应就完成了。但细心的我发现了这个字体有个小 bug，即在 <strong>‘组’</strong> 字的<strong>粗体</strong>形式下是有局部显示不出来。</p>
<p>字体 bug 如下图</p>
<p><img src="https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/img/2020/20201020223824.png" srcset="/img/loading.gif" alt="image-20201020223617426"></p>
<p>最终修复完成的效果如下图</p>
<p>   <img src="https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/img/2020/20201020225055.png" srcset="/img/loading.gif" alt="image-20201020225052683"></p>
<p>解决方法如下：</p>
<ol>
<li>找到 ‘组’ 的 Unicode 编码 <code>U+7ec4</code></li>
<li>在 <code>font.css</code> 中找到对应的子集文件 <code>OPPOSansSC_17.woff2</code>，导入到<a target="_blank" rel="noopener" href="http://fontstore.baidu.com/static/editor">编辑器</a>中，并查找字形位置。</li>
</ol>
<p><img src="https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/img/2020/20201020230125.png" srcset="/img/loading.gif" alt="image-20201020230122620"></p>
<p>定位到具体字形的位置，方便后续的修改</p>
<p><img src="https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/img/2020/20201020225821.png" srcset="/img/loading.gif" alt="image-20201020225819509"></p>
<ol start="3">
<li><p>新建一个字形项目，选择两个或多个能组成该字的部分，<strong>对该字的相应偏旁部首重新结合</strong>(最好尝试不同的组合)。本例子的 <strong>‘组’字是由’练’的’纟’和’姐’的’且’拼合而成</strong>。</p>
</li>
<li><p>组合完成后，在预览页处<strong>查看粗体的效果</strong>，若能成功恢复效果即成功，若失败则重新找不同的组合，直至修复完成。</p>
<p>在线编辑器不支持超过3000个字形的预览，请注意字形的个数。</p>
<p><img src="https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/img/2020/20201020230917.png" srcset="/img/loading.gif"></p>
<p>在预览页处的&lt;h1&gt;标签中，添加如下 html 语句</p>
<div class="hljs"><pre class="hljs-wrap"><code data-rel="Code" class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>组织<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></code></pre></div>

<p>接着查看实际字体的样式是否改变，若改变则修复完成，将该字形覆盖到原字体文件，再导出即可。</p>
</li>
</ol>
<p>至此，粗体修复完成了，后续遇到类似的情况可套用上述的步骤。</p>
<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><ul>
<li><a target="_blank" rel="noopener" href="https://cyh.me/2020/04/font-minification">通过 fontTools 精简字体</a></li>
<li><a target="_blank" rel="noopener" href="https://stackoverflow.max-everyday.com/2020/02/fonttools/">Font­Tools 安装与使用简明指南</a></li>
<li><a target="_blank" rel="noopener" href="https://www.imaegoo.com/2020/chinese-font-compress/">网页中文字体压缩（woff2）、拆分、去繁体字库，提高加载速度</a></li>
<li><a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_34378922/article/details/87953858">前端字体截取</a></li>
<li><a target="_blank" rel="noopener" href="http://fontstore.baidu.com/static/editor">百度在线字体编辑器</a></li>
</ul>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/Hexo/">Hexo</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/python/">python</a>
                    
                      <a class="hover-with-bg" href="/tags/%E5%AD%97%E4%BD%93/">字体</a>
                    
                  </div>
                
              </div>
              
              
                <div class="post-prevnext row">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2020/10/17/10-17-Common-Mysql-Commands/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">MySQL 命令大全</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2020/10/12/10-12-Ten-Sort-Alogrithm/">
                        <span class="hidden-mobile">十个常见的排序算法</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
      <div class="col-lg-7 mx-auto nopadding-md">
        <div class="container custom mx-auto">
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/css/font.css">
        </div>
      </div>
    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <span>©2020 by Lin<br>驱动</span> <a href="https://hexo.io" target="_blank" rel="nofollow noopener">Hexo</a> <span>|&nbsp;主题</span> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener">Fluid</a> <div> <span id="timeDate">载入天数...</span> <span id="times">载入时分秒...</span> <script src="/js/mod/duration.js"></script> </div> <div> <p style="font-size: 18px; font-weight: bold;" id="hitokoto">:D 获取中...</p> <script src="/js/mod/hitokoto.js"></script> </div> 
  </div>
  

  

  
</footer>

<!-- SCRIPTS -->

  <script  src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":200})
    NProgress.start()
    document.addEventListener('DOMContentLoaded', function() {
      window.NProgress && window.NProgress.inc();
    })
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js" ></script>
<script  src="https://cdn.staticfile.org/twitter-bootstrap/4.5.3/js/bootstrap.min.js" ></script>
<script  src="/js/debouncer.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/js/lazyload.js" ></script>
  



  



  <script  src="https://cdn.staticfile.org/tocbot/4.12.0/tocbot.min.js" ></script>



  <script  src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js" ></script>





  <script defer src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js" ></script>




<!-- 1.8.5 的原版的不好用 还是换回来了 -->
<!-- 打字机特效 -->

  <script  src="https://cdn.staticfile.org/typed.js/2.0.11/typed.min.js" ></script>
    <script type="text/javascript">
        !function(e){var n,t={},o="jinrishici-token";function i(){return document.getElementById("jinrishici-sentence")||0!=document.getElementsByClassName("jinrishici-sentence").length}function c(){t.load(function(e){var n=document.getElementById("jinrishici-sentence"),t=document.getElementsByClassName("jinrishici-sentence");if(n&&(n.innerText=e.data.content),0!==t.length)for(var o=0;o<t.length;o++)t[o].innerText=e.data.content})}function r(e,n){var t=new XMLHttpRequest;t.open("get",n),t.withCredentials=!0,t.send(),t.onreadystatechange=function(n){if(4===t.readyState){var o=JSON.parse(t.responseText);"success"===o.status?e(o):console.error("今日诗词API加载失败，错误原因："+o.errMessage)}}}t.load=function(n){return e.localStorage&&e.localStorage.getItem(o)?function(e,n){return r(e,"https://v2.jinrishici.com/one.json?client=browser-sdk/1.2&X-User-Token="+encodeURIComponent(n))}(n,e.localStorage.getItem(o)):function(n){return r(function(t){e.localStorage.setItem(o,t.token),n(t)},"https://v2.jinrishici.com/one.json?client=browser-sdk/1.2")}(n)},e.jinrishici=t,i()?c():(n=function(){i()&&c()},"loading"!=document.readyState?n():document.addEventListener?document.addEventListener("DOMContentLoaded",n):document.attachEvent("onreadystatechange",function(){"complete"==document.readyState&&n()}))}(window); 
        // 输出指定数量空格+引用
        function writeSpace(len){
          len = (len > 10) ? (len > 31 ? 0 : 8) : len
          var space = ''
          for(var i = 0; i<len; i++){
            space += '&emsp;'
          }
          return space+"——";
        }

        // 执行打字机动效
        function startTyping(strs){
          var typed = new Typed('#subtitle', {
          strings: ['  ', strs],
          cursorChar: "_",
          typeSpeed: 50,
          loop: false,
          });
          typed.stop();
          $(document).ready(function () {
            $(".typed-cursor").addClass("h2");
            typed.start();
          }); 
        }
    </script>
  
    <script>
      // 非首页 则输出文章标题
      var strs = document.getElementById('subtitle').title + "&nbsp;";
      startTyping(strs);
    </script>
  


  <script  src="/js/local-search.js" ></script>
  <script>
    (function () {
      var path = "/local-search.xml";
      var inputArea = document.querySelector("#local-search-input");
      inputArea.onclick = function () {
        searchFunc(path, 'local-search-input', 'local-search-result');
        this.onclick = null
      }
    })()
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>



</body>
</html>
